<template>
    <view class="deposit-container">
        <div class="title">{{$t('mine.wallet.deposit.title')}}</div>
        <image class="banner" mode="widthFix" src="@/static/icon/wallet_banner.png" />
        <view class="text">{{$t('mine.wallet.deposit.content1')}}</view>
        <view class="text">{{$t('mine.wallet.deposit.content2')}}</view>
        <view class="text">{{$t('mine.wallet.deposit.content3')}}</view>
        <view class="btns" @click="openService">{{$t('mine.wallet.deposit.service')}}</view>
    </view>
    <uni-popup ref="serviceRef">
        <Service @onClose="onClose" />
    </uni-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Service from '@/components/Service/index';
import { onLoad } from '@dcloudio/uni-app';

const serviceRef = ref(null) as any;
onLoad(() => {});

//开启客服弹框
const openService = () => {
    serviceRef.value.open('center');
};

//关闭服弹窗
const onClose = () => {
    serviceRef.value.close();
};
</script>

<style lang="scss" scoped>
.deposit-container {
    background: #fff;
    height: 940rpx;
    border-radius: 30rpx 30rpx 0 0;
    padding: 0 30rpx;
    .title {
        padding: 70rpx 0 0;
        text-align: center;
        font-size: 46rpx;
        font-weight: 600;
    }
    .banner {
        width: 100%;
        margin-top: 20rpx;
    }
    .text {
        text-align: center;
        font-size: 34rpx;
        padding: 0 30rpx;
        line-height: 50rpx;
    }
    .btns {
        margin-top: 80rpx;
        background: #0866ff;
        color: #fff;
        height: 98rpx;
        display: flex;
        border-radius: 24rpx;
        align-items: center;
        justify-content: center;
        &:active {
            opacity: 0.7;
        }
    }
}
</style>
